<template>
	<view class="pics">
		<scroll-view scroll-y="true" class="left">
			<view :class="active==index?'active':''" v-for=" (i,index) in pics" :key="i.id" @click="picsShow(index,i.id)">{{i.title}}</view>
			
		</scroll-view>
		<scroll-view scroll-y="true"  class="right">
			<view class="itme" v-for=" i in secondDate" :key="i.id">
				<image :src="imageUrl"  @click="yulan(imageUrl)"></image>
				<text>{{i.title}}</text>
			</view>
			<text v-if="secondDate.length==0">暂无数据</text>
			
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pics:[],
				active:0,
				secondDate:[],
				imageUrl:'https://img1.baidu.com/it/u=1407750889,3441968730&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=799'
			}
		},
		onLoad() {
			this.getPics()
		},
		methods: {
			async getPics(){
				let res= await this.$myRequest({
					url:'/api/getimgcategory',
					mehtod:'GET'
				})
				
				this.pics=res.data.message
				this.picsShow(0,this.pics[0].id)
				
			},
			async picsShow(index,id){
				this.active=index
				let res= await this.$myRequest({
					url:`/api/getimages/${id}`
				})
				this.secondDate=res.data.message
				
			},
			yulan(current){
			
				
				uni.previewImage({
					urls:[
						'https://img1.baidu.com/it/u=1407750889,3441968730&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=799'
					],
					current
				})
			}
			
		}
	}
</script>

<style lang="less">
	page{
		height: 100%;
	}
	.pics{
		height: 100%;
		display: flex;
		.left{
			width: 200rpx;
			height: 100%;
			border-right: 1px solid #ccc;
			view{
				height: 60px;
				line-height: 60px;
				color: #333;
				text-align: center;
				font-size: 30rpx;
				border-top: 1px dashed #e2e2e2;
				
			}
			.active{
				background-color:#ffc9fd ;
				color: #fff;
			}
		}
		.right{
			height: 100%;
			width: 520rpx;
			margin: 20rpx auto;
			padding: 0 10px;
			.item{
				border-radius: 10rpx;
				
				image{
					width: 520rpx;
					height: 520rpx;
					border-radius: 5%;
				}
				text{
					
					font-size: 30rpx;
					line-height: 60rpx;
				}
			}
		}
	}
</style>
